<template>
	<view :style="'background-color:'+[item.style.bgColor?item.style.bgColor:'transparent']">
        <block v-if="item.params.mode=='one'">
            <view v-for="(image,index) in item.data.image" :key="index" :style="[imgStyle]" @click="jump(index)">
                <image class="one-img block" :style="index>0?'padding-top:'+item.style.imageMargin+'rpx':''" :src="image.url"  mode="widthFix"/>
            </view>
        </block>
        <block v-if="item.params.mode=='slide'">
            <view :style="[imgStyle]">
                <u-scroll-list :indicator="false">
                    <view v-for="(image, index) in item.data.image" :key="index"  @click="jump(index)">
                        <image class="slide-img block" :style="'height:'+slideHeight+[index>0?';margin-left:'+item.style.imageMargin+'rpx':'']" mode="aspectFill" :src="image.url"></image>
                    </view>
                </u-scroll-list>
            </view>
        </block>

		<block v-if="item.params.mode=='swiper'">
            <view :style="[imgStyle]">
                <u-swiper
                        imgMode="aspectFill"
                        :list="item.data.image"
                        :height="height"
                        indicator
                        circular
                        indicatorMode="dot"
                        radius="0"
                        :bgColor="item.style.bgColor?item.style.bgColor:'transparent'"
                        @click="jump"
                ></u-swiper>
            </view>
        </block>
        <block v-if="item.params.mode=='card'">
            <view :style="[imgStyle]">
                <u-swiper
                        imgMode="aspectFill"
                        :list="item.data.image"
                        previousMargin="30"
                        nextMargin="30"
                        circular
                        :height="height"
                        :autoplay="false"
                        radius="0"
                        :bgColor="item.style.bgColor?item.style.bgColor:'transparent'"
                        @click="jump"
                ></u-swiper>
            </view>
        </block>
	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
    export default {
		name:"wlk-image",
		data() {
			return {
				height:'',
                slideHeight:'',
                imgStyle:{
                    padding:'0'
                },

			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            systemInfo: {
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        },
        created:function(e){
		    this.setImageStyle();
        },
        methods: {
            setImageStyle(){
                var _self = this;
                _self.imgStyle.padding = '0 '+uni.$u.addUnit(_self.item.style.pageMargin, 'rpx');
                    switch (_self.item.params.mode) {
                        case 'one':
                        case 'swiper':
                        case 'card':
                            _self.height =  this.item.height;
                            break;
                        case 'slide':
                            _self.slideHeight =  this.item.slideHeight;
                            break;
                    }
            },
            jump(index){
                toUrl(this.item.data.image[index]['linkpath']);
            }
        }
	}
</script>

<style lang="scss" scoped>
    .one-img{
        width: 100%;
        height: auto;
    }
    .slide-img{

    }
</style>